<template>
    <div>
        <h2>axios 请求 json-server 数据 </h2>
        <p v-for="(l,i) in list" :key="i">
            {{l}}
        </p>
        <hr>
        <div>
            <p>注册</p>
            <p>用户名:  <input type="text" placeholder="请输入用户名" v-model="form.username"> </p>
            <p>手机号:  <input type="text" placeholder="请输入手机号" v-model="form.phone"> </p>
            <p>密码:  <input type="text" placeholder="请输入密码" v-model="form.password"> </p>
            <p><button @click="addUsers">添加</button></p>
        </div>
        <div v-for="(l,i) in users" :key="l.username"> 
            <p> {{l.username}} - {{l.phone}} -- {{l.password}}  
                <button @click="deleteOne(l,i)">删除</button>
                <button @click="updateOne(l,i)">修改</button>
            </p>
        </div>
        <div v-for="(item,i) in obj" :key="i">
            <p>用户名: {{obj.username }}</p>
            <p>多大: {{obj.age }}</p>
            <p>地址: {{obj.address }}</p>
            <hr>
        </div>
    </div>
</template>

<script>
import axios from "axios"
axios.defaults.baseURL = "http://localhost:2107/"   // axios请求的基本路径 

export default {
    data(){
        return {
            list:[],
            users:[],
            form:{},
            obj:{
                username:"李伟",
                age:29,
                status:"配送中",
                address:"千锋教育"
            }
        }
    },
    methods:{
        updateOne(item,index){
            var value = window.prompt(index,item.username);
            if(value){
                axios({
                    url:"/users/"+item.id,
                    method:"patch",
                    data:{
                        username:value
                    }
                })
                .then(res=>{
                    this.$set(this.users,index,{...item,username:value})
                })
            }
        },
        deleteOne(item,index){
            // axios.delete("/users/"+item.id)
            // .then(res=>{
            //     console.log(res)
            // })
            axios({
                url:"/users/"+item.id,
                method:"delete",
            })
            .then(res=>{
                this.$delete(this.users,index);
            })
        },
        addUsers(){
            axios.post("/users",this.form)
            .then(res=>{
                axios.get("/users")
                .then(res=>{
                    this.users = res.data;
                })
            })
        }
    },
    mounted(){
         // $.ajax({
        //     url:commonUrl+"/first",
        //     type:"GET",
        //     data:{
        //         id:2107
        //     },
        //     success:res=>{
        //         console.log(res)
        //         this.list = res;
        //     },
        // })
        // $.get(commonUrl+"/first",{
        //     id:2100
        // })
        // .then(res=>{
        //     this.list = res;
        // })

        // Promise  
        axios({
            url:'/first',
            method:"GET",
            params:{
                id:2107  // ?id=2107 
            },
        })
        .then(res=>{
            console.log(res)
            this.list = res.data 
        })
        .catch(err=>{
            console.log(err)
        })

        axios({
            url:"/users",
            method:"GET",
            params:{
                // id:2   // 获取id = 2107  c
            }
        }).then(res=>{
            console.log(res)
            // this.$nextTick(()=>{})
            // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新
            // 异步 
            this.$nextTick(()=>{
                this.users = res.data;
                this.$forceUpdate();  // 强制刷新组件
            })
            
        })

    }
}
</script>